<template>
	<div>
		<div id="DetailReadBook">
			<div class="title"><h2>{{listReadBook.title}}</h2></div>
			<div class="text">
				<p>{{listReadBook.abstract}}</p>
			</div>
		</div>
	</div>
</template>

<script>
	import Vue from 'vue'
	
	export default{
		data(){
			return{
				listReadBook:this.$store.state.bookDirectory.list[0],
			}
		},
		mounted() {
			console.log(this.listReadBook)
		},
	}
</script>

<style scoped lang="scss">
	#DetailReadBook{
		background-color: #F8F9F9;
		
		padding: 1.25rem 1.25rem 3.125rem;
		box-sizing: border-box;
		
		margin-bottom: 20px;
		
		.title{
			margin-bottom: 1.875rem;
		}
		.text{
			font-size: 19px;
			line-height: 33px;
			text-align: justify;
		}
	}
</style>